<template>
  <basic-container>
    <div class="grid-content bg-purple">
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="password">
          <el-input v-halfCharCode type="password" v-model.trim="ruleForm2.password" auto-complete="off" />
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword1">
          <el-input v-halfCharCode type="password" v-model.trim="ruleForm2.newpassword1" auto-complete="off" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="newpassword2">
          <el-input v-halfCharCode type="password" v-model.trim="ruleForm2.newpassword2" auto-complete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormPassword('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </basic-container>
</template>


<script>
import { mapState } from 'vuex'
import request from '@/plugins/axios'
import { validatePass } from '~/utils/validate'

export default {
  data () {
    return {
      ruleForm2: {
        username: '',
        newpassword1: '',
        newpassword2: '',
        password: ''
      },
      rules2: {
        password: [{ required: true, min: 6, message: '原密码不能为空且不少于6位', trigger: 'change' }],
        newpassword1: [
          { required: true, min: 6, message: '密码长度必须不少于6位,不大于15位，并且必须同时包含数字、字母、特殊字符（特殊字符包括（英文字符）：!@#$%^&*()）', trigger: 'change' },
          { validator: validatePass, trigger: 'blur' },
          { validator: this.validateInitPass, trigger: 'blur' },
        ],
        newpassword2: [{ required: true, validator: this.validatePassjiaoyan, trigger: 'blur' }]
      }
    }
  },
  created () {
    this.ruleForm2.username = this.userInfo.username
    this.ruleForm2.realName = this.userInfo.realName
    this.ruleForm2.phone = this.userInfo.phone
    this.ruleForm2.userId = this.userInfo.userId
  },
  beforeRouteLeave (to, from, next) {
    if (to.path != '/login' && this.needResetPassword) {
      this.$confirm('请先修改密码！', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        showCancelButton: false,
        closeOnClickModal: false
      })
      return false;
    } else {
      next()
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user,
      needResetPassword: state => state.user.needResetPassword,
    }),
  },
  methods: {
    submitFormPassword (formName) {

      this.$refs[formName].validate(valid => {
        if (valid) {
          request({
            url: '/admin/user/editPassword',
            method: 'put',
            data: this.ruleForm2
          }).then(response => {
            if (response.data.data) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 5000
              })
              // 修改密码之后强制重新登录
              /*        this.$store.dispatch('LogOut').then(() => {
                           location.reload() // 为了重新实例化vue-router对象 避免bug
                       })*/
              this.$alert('密码修改成功，请重新登录', '', {
                confirmButtonText: '确定',
                callback: action => {

                  localStorage.removeItem('lastUrl');
                  this.$store.dispatch('LogOut');
                }
              });

            } else {
              this.$notify({
                title: '失败',
                message: response.data.msg,
                type: 'error',
                duration: 5000
              })
            }
          }).catch(() => {
            this.$notify({
              title: '失败',
              message: '修改失败',
              type: 'error',
              duration: 5000
            })
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    validatePassjiaoyan (rule, value, callback) {
      if (this.ruleForm2.password !== '') {
        value !== this.ruleForm2.newpassword1 ? callback(new Error('两次输入密码不一致!')) : callback()
      } else {
        callback()
      }
    },
    validateInitPass (rule, value, callback) {
      value === '123zxc!@#' ? callback(new Error('修改后的秘密和修改前的密码不能一样!')) : callback()
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px !important;
  color: #8c939d !important;
  width: 178px !important;
  height: 178px !important;
  line-height: 178px !important;
  text-align: center !important;
}

.avatar {
  width: 146px;
  height: 146px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
